<template>
  <doc-alert title="报表设计器" url="https://doc.iocoder.cn/report/" />

  <ContentWrap :bodyStyle="{ padding: '0px' }" class="!mb-0">
    <IFrame ref="frameRef" :src="src" />
  </ContentWrap>
</template>
<script lang="ts" setup>
import { getRefreshToken } from '@/utils/auth'

defineOptions({ name: 'JimuReport' })

// 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：积木报表无法方便的刷新访问令牌
const src = ref(import.meta.env.VITE_BASE_URL + '/jmreport/list?token=' + getRefreshToken())
const frameRef: any = ref(null)
watch(
  () => frameRef.value?.loading,
  (val) => {
    if (!val) {
      console.log('iframe加载完成jimu-report')
      nextTick(() => {
        console.log(
          frameRef.value.frameRef,
          frameRef.value?.frameRef?.contentWindow,
          '---frameRef.value?.contentWindow'
        )
        try {
          const contentWindow = frameRef.value?.frameRef?.contentWindow
          console.log(contentWindow,'---contentWindow');
          
          if (contentWindow) {
            const parentNode = contentWindow.document.querySelector('.jimu-header').parentNode
            const topParentNode = parentNode.parentNode
            topParentNode.style.paddingTop = '16px'
            topParentNode.removeChild(parentNode)
            topParentNode.removeChild(contentWindow.document.querySelector('.layout-footer'))
          }
        } catch (error) {
          console.log(error, '---error')
        }

        // frameRef.value?.contentWindow?.init()
      })
    }
  }
)
</script>
